<!--招聘管理-->
<template>
  <div class="rightBodyContent">
    <div class="personnel-data">
      <div class="personnel-data-list">
        <div class="personnel-data-list-l color-01">
          <i class="iconfont icongangweiguanli"></i>
        </div>
        <div class="personnel-data-list-r">
          <p class="personnel-data-list-r-num">{{ tabNum ? tabNum.job_number || 0 : 0 }} <span>个</span></p>
          <p class="personnel-data-list-r-title">当前拟聘岗位</p>
        </div>
      </div>
      <div class="personnel-data-list">
        <div class="personnel-data-list-l color-14">
          <i class="iconfont iconrenshu"></i>
        </div>
        <div class="personnel-data-list-r">
          <p class="personnel-data-list-r-num">{{ tabNum ? tabNum.sum_number || 0 : 0 }} <span>个</span></p>
          <p class="personnel-data-list-r-title">当前拟招聘人数</p>
        </div>
      </div>
      <div class="personnel-data-list">
        <div class="personnel-data-list-l color-12">
          <i class="iconfont iconjianli"></i>
        </div>
        <div class="personnel-data-list-r">
          <p class="personnel-data-list-r-num">{{ tabNum ? tabNum.resume_number || 0 : 0 }}<span>份</span></p>
          <p class="personnel-data-list-r-title">当前简历投递</p>
        </div>
      </div>
      <div class="personnel-data-list">
        <div class="personnel-data-list-l color-09">
          <i class="iconfont iconyiyuankaohe"></i>
        </div>
        <div class="personnel-data-list-r">
          <p class="personnel-data-list-r-num">{{ tabNum ? tabNum.recruit_number || 0 : 0 }} <span>个</span></p>
          <p class="personnel-data-list-r-title">当前待面试</p>
        </div>
      </div>
      <div class="personnel-data-list">
        <div class="personnel-data-list-l color-07">
          <i class="iconfont iconkaohe"></i>
        </div>
        <div class="personnel-data-list-r">
          <p class="personnel-data-list-r-num">{{ tabNum ? tabNum.trail_number || 0 : 0 }} <span>个</span></p>
          <p class="personnel-data-list-r-title">当前考核中</p>
        </div>
      </div>
    </div>
    <div class="rightBodyContent-in">
      <div class="hearder-search">
        <div class="breadcrumb-container d-flex a-items">
          <el-select v-model="searchForm.job_id" placeholder="选择岗位" size="small">
            <el-option
                v-for="item in jobList"
                :key="item.id"
                :label="item.name"
                :value="item.id">
            </el-option>
          </el-select>
          <el-button type="primary" size="small" @click="searchFn('search')" class="ml-10"><i class="el-icon-search"></i>搜索</el-button>
          <el-button size="small" @click="searchFn('refresh')"><i class="el-icon-refresh"></i>重置刷新</el-button>
          <span class="DividingLine"></span>
          <el-button type="primary" @click.native="addRecruit(0)" size="small">新增招聘</el-button>
          <el-button @click="educationVisible=true" size="small">学历管理</el-button>
          <el-button @click="postVisible=true" size="small">岗位管理</el-button>
        </div>
      </div>
      <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
        <el-tab-pane :label="`招聘中（${recruitmentTab?recruitmentTab.in_number:0}）`" name="first"></el-tab-pane>
        <el-tab-pane :label="`历史发布（${recruitmentTab?recruitmentTab.old_number:0}）`" name="history"></el-tab-pane>
        <el-tab-pane :label="`待审核发布（${recruitmentTab?recruitmentTab.examine_number:0}）`" name="examine"></el-tab-pane>
      </el-tabs>
      <!--本体列表，数据 -->
      <div class="table-body">
        <div class="table-body-box">
          <!--          在用列表-->
          <recruitmentIndex v-if="activeName=='first'" @addRecruit="addRecruit" :arryList="arryList"
                            @showList="showList" @resumeEndFn="resumeEndFn" @getQrcode="getQrcode"></recruitmentIndex>
          <!--          历史招聘-->
          <recruitmentHistory v-if="activeName=='history'" @addRecruit="addRecruit" @showList="showList"
                              :arryList="arryList" @getQrcode="getQrcode" @copyRecruit="copyRecruit"></recruitmentHistory>
          <!--          审核招聘-->
          <recruitmentExamine v-if="activeName=='examine'" @addRecruit="addRecruit"
                              :arryList="arryList"></recruitmentExamine>
        </div>
      </div>
      <!--工具条 分页-->
      <el-col :span="24" class="toolbar">
        <el-pagination
            background
            :page-size="page.pagesize"
            :current-page="page.pageindex"
            layout="total, prev, pager, next"
            :total="page.total"
            @current-change="handleSizeChange"></el-pagination>
      </el-col>
    </div>
    <!--    查看应聘者各个简历信息-->
    <checkList :visible.sync="checkVisible" :resumeType="optionType" :recruitId="recruitmentId"></checkList>
    <!--    学历管理-->
    <educationIndex :visible.sync="educationVisible"></educationIndex>
    <!--    岗位管理-->
    <postIndex :visible.sync="postVisible"></postIndex>
    <!--    新增编辑招聘-->
    <NewRecruitment :visible.sync="recruitmentVisible" :resumeId="recruitmentId" @InitFn="InitFn"
                    :recruitmentType="activeName"></NewRecruitment>
    <!--    复制招聘-->
    <copyRecruitment :visible.sync="copyVisible" :resumeId="copyId" @InitFn="InitFn"></copyRecruitment>
    <!--    发布后不可更改招聘详情-->
    <!--    简历详情 -->
    <!--    查看二维码-->
    <qrcodeResume :visible.sync="qrcideVisible" :qrcideOption="qrcideId"></qrcodeResume>
  </div>
</template>

<script>
import {pagination, tableoption, yeartime} from '@/utils/util.js'
import checkList from "./popup/checkList";
import educationIndex from "./education/index"
import postIndex from "./post/index"
import NewRecruitment from "./NewRecruitment";
import recruitmentIndex from "./tableList/index"
import recruitmentHistory from "./tableList/history"
import recruitmentExamine from "./tableList/examine"
import qrcodeResume from "./qrcodeResume";
import copyRecruitment from "./copyRecruitment";

export default {
  components: {
    checkList,
    educationIndex,
    postIndex,
    NewRecruitment,
    recruitmentIndex,
    recruitmentHistory,
    recruitmentExamine,
    qrcodeResume,
    copyRecruitment
  },
  data() {
    return {
      tableList: [{name: '全部', id: 0}],
      tableoption: tableoption,
      qrcideVisible: false,
      qrcideId:0,
      page: {
        pageindex: pagination.pageIndex,
        pagesize: pagination.pageSize,
        total: pagination.total
      },
      arryList: [], // 数据列表
      // 搜索
      searchForm: {
        job_id: '',
        status: 0,
        is_examine: 0
      },
      // 弹窗
      dialogVisible: false,
      editIndex: null,
      foodOption: '',
      dialogType: null,
      activeName: 'first',
      activeNamechange: 'first', // 切换导航
      checkVisible: false,
      optionType: 0,
      educationVisible: false,
      postVisible: false,
      recruitmentVisible: false,
      recruitmentId: 0,
      jobList: [],
      tabNum: null,
      recruitmentTab: null,
      recruitmentType: '', // 编辑类型
      copyId: 0,
      copyVisible: false
    }
  },
  created() {
    this.JobFn()
    this.InitFn()
  },
  methods: {
    // 初始化
    InitFn() {
      //activeName  first 在线; history 历史; examine 审核
      if (this.activeName === 'first') {
        this.searchForm.status = 1
        this.searchForm.is_examine = 1
      }
      if (this.activeName === 'history') {
        this.searchForm.status = 0
        this.searchForm.is_examine = 1
      }
      if (this.activeName === 'examine') {
        this.searchForm.status = 1
        this.searchForm.is_examine = 0
      }
      this.searchForm.p = this.page.pageindex
      this.$post(this.api.recruit.resume.index, this.searchForm).then((response) => {
        if (response.code === 0) {
          for (let i in response.list.data) {
            response.list.data[i].create_time = response.list.data[i].create_time.split(' ')[0]
            response.list.data[i].update_time = response.list.data[i].update_time.split(' ')[0]
          }
          this.arryList = response.list.data
          this.page.total = response.list.total
          this.tabNum = response.number
          this.recruitmentTab = response.list_number
        } else {
        }
      }).catch((err) => {
        console.log(err)
      })
    },
    // 获取岗位信息
    async JobFn() {
      let data = await this.$fetch(this.api.recruit.job.index, {p: 1});
      this.jobList = data.list.data;
    },
    // 分页
    handleSizeChange(val) {
      this.page.pageindex = val
      this.InitFn()
    },
    // 新增招聘
    addRecruit(option) {
      this.recruitmentId = option ? option.id : 0
      this.recruitmentVisible = true
    },
    // 再次招聘
    copyRecruit(option){
      this.copyId = option ? option.id : 0
      this.copyVisible = true
    },
    // 切换tab
    handleClick(tab, event) {
      if(this.activeName!==this.activeNamechange){
        this.activeNamechange = this.activeName;
        this.page.pageindex = 1
        this.arryList = []
        this.InitFn()
      }
    },
    // 查看应聘简历
    showList(option) {
      console.log('点击了', option)
      this.optionType = option.type;
      this.recruitmentId = option.id
      this.checkVisible = true;
    },
    // 招聘截止
    resumeEndFn(option) {
      let n = this;
      this.$confirm('确认截止当前招聘信息, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        closeOnClickModal: false,
        type: 'warning'
      }).then(() => {
        n.resumeEndDeletFn(option)
      }).catch(() => {
      })
    },
    async resumeEndDeletFn(id) {
      let data = await this.$post(this.api.recruit.resume.end, {id: id});
      if (!data.code) {
        this.$message.success(data.msg)
        this.InitFn()
      } else {
        this.$message.error(data.msg)
      }
    },
    // 查看二维码
    getQrcode(option) {
      // option 招聘信息
      this.qrcideId = option;
      this.qrcideVisible = true;
    },
    searchFn(option) {
      if (option === 'refresh') {
        this.searchForm.job_id = ''
      }
      this.page.pageindex = 1;
      this.InitFn()
    }
  },
  mounted() {
  }
}
</script>
<style scoped>
.el-tabs__header {
  margin-bottom: 0 !important;
}

.personnel-data {
  display: flex;
  align-items: center;
  background: #fff;
  margin-top: 10px;
  border-radius: 4px;
  box-shadow: 0 0px 4px 0 rgba(0, 0, 0, 0.2);
}

.personnel-data-list {
  flex: 1;
  border-right: 1px solid #eee;
  display: flex;
  align-items: center;
  padding: 20px 0;
  justify-content: center;
  cursor: pointer;
}

.personnel-data-list:last-child {
  border-right: none;
}

.personnel-data-list-l {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.personnel-data-list-l i {
  margin: 0;
  color: #fff;
  font-size: 20px;
}

.personnel-data-list:nth-child(3) i {
  font-size: 22px;
}

.personnel-data-list:nth-child(4) i {
  font-size: 26px;
}

.personnel-data-list:nth-child(5) i {
  font-size: 26px;
}

.personnel-data-list-r {
  width: 100px;
  margin-left: 10px;
}

.personnel-data-list-r-num {
  font-size: 16px;
  font-weight: bold;
}

.personnel-data-list-r-num span {
  font-size: 12px;
  font-weight: normal;
}

.personnel-data-list-r-title {
  color: #777;
}

.fileNum {
  color: #007dff;
  font-weight: bold;
}

.fileNum:hover {
  text-decoration: underline;
}

.DividingLine {
  display: block;
  width: 1px;
  height: 30px;
  background: #ddd;
  margin: 0 20px;
}
</style>
<!--68b6f5 1fbeaf fdb43c eb7876 f08642-->
<!--<div class="personnel-data">-->
<!--<div class="personnel-data-list">-->
<!--  <div class="personnel-data-list-l">-->
<!--    <i></i>-->
<!--  </div>-->
<!--  <div class="personnel-data-list-r">-->
<!--    <p class="personnel-data-list-r-num">171 <span>个</span></p>-->
<!--    <p class="personnel-data-list-r-title">招聘岗位</p>-->
<!--  </div>-->
<!--</div>-->
